$.fn.banner = function(items, ops){
    "use strict";
    const that = this;
    let {btn=true, list=true, autoPlay=true, delayTime=2000, moveTime=200, index=0, reverse=false} = ops || {};
    let prev;
    let str = "";
    items.forEach(val => {
        str += `<img src="${val.src}" alt="${val.name}" title="${val.title}">`
    });
    const imgs = $(`<div class="imgbox">${str}</div>`).appendTo(this).children("img");
    imgs.css("left", imgs.eq(0).width()).eq(index).css("left",0);
    if(btn){
        $(`<div class="btns"></div>`).append($("<input type='button' class='left' value='⇤'>")).append($("<input type='button' class='right' value='⇥'>")).appendTo(this).children(".left").click(leftClick).next(".right").click(rightClick);
    }
    function leftClick(){
        if(index === 0){
            index = imgs.length-1;
            prev = 0;
        }else{
            index--;
            prev = index + 1;
        }
        move(prev, index, 1);
    }
    function rightClick(){
        if(index === imgs.length-1){
            index = 0;
            prev = imgs.length-1
        }else{
            index++;
            prev = index - 1;
        }
        move(prev, index, -1);
    }
    function move(prev, now, direct){
        imgs.eq(prev).css({
            left:0
        }).stop().animate({
            left:imgs.eq(0).width() * direct
        }, moveTime).end().eq(now).css({
            left:-imgs.eq(0).width() * direct
        }).stop().animate({
            left:0
        }, moveTime)

        that.children(".list").children("span").eq(now).addClass("active").siblings().removeClass("active");
    }
    if(list){
        let str = "";
        items.forEach(()=>{
            str += `<span></span>`
        })
        const span = $("<div class='list'>"+ str +"</div>").appendTo(this).children();
        span.eq(index).addClass("active").siblings().removeClass("active");
        span.click(function(){
            if($(this).index() > index){
                move(index, $(this).index(), -1);
            }
            if($(this).index() < index){
            
                move(index, $(this).index(), 1);
            }
           
            index = $(this).index();
        })
    }

    if(autoPlay){
       
        let t = setInterval(() => {
            
            if(reverse){
                leftClick();
            }else{
                rightClick();
            }
        }, delayTime);
        this.hover(function(){
            clearInterval(t);
        },function(){
            t = setInterval(() => {
                if(reverse){
                    leftClick();
                }else{
                    rightClick();
                }
            }, delayTime);
        })
    }
}
